<template>
  <div :class="share.share">
    <i class="icon-share icon-font" @click="showShare"></i>
    <!--<span>|</span>-->
    <!--<i class="icon-dianzan icon-font"><span>0</span></i>-->
    <div class="clearfix" :class="share.container" v-if="status">
      <p class="float-left" @click="shareWeiBo">
          <img src="../assets/svg/logo-weibo.svg" alt="">
        </p>
      <p class="float-right" @click="shareWeiXin">
          <img src="../assets/svg/logo-weixin.svg" alt="">
        </p>
      <div :class="share.erweicode" class="float-left" v-show="codeStatus">
        <canvas ref="qrCanvas"></canvas>
      </div>
    </div>
  </div>
</template>
<script>
  import QRious from 'qrious'
  export default {
    name: 'share',
    data () {
      return {
        status: false,
        codeStatus: false
      }
    },
    computed: {
      shareUrl () {
        return 'http://neican.io/articlePage' + this.shareId
      }
    },
    props: {
      // liked: { // 喜欢的数量
      //   required: true
      // },
      // like: { // 是否喜欢过
      //   required: true
      // },
      shareId: {  // 扫码分享地址
        required: true
      },
      title: {
        required: true
      }
    },
    methods: {
      showShare () {
        this.codeStatus = false
        this.status = !this.status
      },
      shareWeiBo () {
        function toWeiBo (title, link, cover) {
          let zp = cover // 图片链接|默认为空
          let t = title // 标题|默认当前页标题
          let z = link // 内容链接|默认当前页location
          let s = window.screen
          let d = window.document
          let e = window.encodeURIComponent

          let c = 'utf-8' // 页面编码gb2312|utf-8默认gb2312
          let u = window.document.location

          let f = 'http://v.t.sina.com.cn/share/share.php?appkey=真实的appkey'
          let p = [
            '&url=', e(z), // url
            '&title=', e(t || d.title), // title
            // '&source=', e(r),
            // '&sourceUrl=', e(l),
            '&content=', c || '',
            '&pic=', e(zp || '')
          ].join('')

          const a = () => {
            if (!window.open([f, p].join(''), 'mb', ['toolbar=0,status=0,resizable=1,width=440,height=430,left=', (s.width - 440) / 2, ',top=', (s.height - 430) / 2].join(''))) {
              u.href = [f, p].join('')
            }
          }
          a()
        }
        toWeiBo(this.title, this.shareUrl)
      },
      shareWeiXin () {
        this.codeStatus = !this.codeStatus
        let qrCanvas = this.$refs.qrCanvas
        let qr = new QRious({
          element: qrCanvas
        })
        qr.set({
          background: '#fff',
          backgroundAlpha: 0.8,
          level: 'H',
          // size: ,
          value: this.shareUrl
        })
      }
    }
  }
</script>
<style lang="scss" module="share">
  .share{
    position: relative;
    color: #878787;
    margin-top:-3px;
    >i{
      margin: 0 5px;
      cursor: pointer;
      font-size:14px;
      span{
        margin-left:5px;
      }
    }
    >span{
      font-size:16px;
      margin:0 2px;
    }
    .container{
      position: absolute;
      left:-35px;
      top:30px;
      padding: 8px 15px;
      width:95px;
      background-color: #fff;
      border: 1px solid #e7eaf1;
      border-radius: 4px;
      z-index:5;
      &:before{
        content:'';
        display: block;
        position: absolute;
        left:38px;
        top:-8px;
        width: 16px;
        height: 8px;
        background-image:url(../assets/images/triangle.png);
        background-size: contain;
      }
      p{
        cursor: pointer;
      }
    }
    .erweicode{
      width:100%;
      height:60px;
      canvas{
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
</style>
